.slide-motion(@className, @keyframeName) {
	.make-motion(@className, @keyframeName);

	.@{className}-enter-active,
	.@{className}-appear {
		opacity: 0;
		animation-timing-function: @ease-in-out;
	}

	.@{className}-leave-active {
		animation-timing-function: @ease-in-out;
	}
}

.slide-motion(transition-drop, drop);
.slide-motion(slide-up, slideUp);
.slide-motion(slide-down, slideDown);
.slide-motion(slide-left, slideLeft);
.slide-motion(slide-right, slideRight);

@keyframes dropIn {
	0% {
		opacity: 0;
		transform: scaleY(0.8);
	}

	100% {
		opacity: 1;
		transform: scaleY(1);
	}
}

@keyframes dropOut {
	0% {
		opacity: 1;
		transform: scaleY(1);
	}

	100% {
		opacity: 0;
		transform: scaleY(0.8);
	}
}

@keyframes slideUpIn {
	0% {
		opacity: 0;
		transform-origin: 0% 0%;
		transform: scaleY(.8);
	}

	100% {
		opacity: 1;
		transform-origin: 0% 0%;
		transform: scaleY(1);
	}
}

@keyframes slideUpOut {
	0% {
		opacity: 1;
		transform-origin: 0% 0%;
		transform: scaleY(1);
	}

	100% {
		opacity: 0;
		transform-origin: 0% 0%;
		transform: scaleY(.8);
	}
}

@keyframes slideDownIn {
	0% {
		opacity: 0;
		transform-origin: 100% 100%;
		transform: scaleY(.8);
	}

	100% {
		opacity: 1;
		transform-origin: 100% 100%;
		transform: scaleY(1);
	}
}

@keyframes slideDownOut {
	0% {
		opacity: 1;
		transform-origin: 100% 100%;
		transform: scaleY(1);
	}

	100% {
		opacity: 0;
		transform-origin: 100% 100%;
		transform: scaleY(.8);
	}
}

@keyframes slideLeftIn {
	0% {
		opacity: 0;
		transform-origin: 0% 0%;
		transform: scaleX(.8);
	}

	100% {
		opacity: 1;
		transform-origin: 0% 0%;
		transform: scaleX(1);
	}
}

@keyframes slideLeftOut {
	0% {
		opacity: 1;
		transform-origin: 0% 0%;
		transform: scaleX(1);
	}

	100% {
		opacity: 0;
		transform-origin: 0% 0%;
		transform: scaleX(.8);
	}
}

@keyframes slideRightIn {
	0% {
		opacity: 0;
		transform-origin: 100% 0%;
		transform: scaleX(.8);
	}

	100% {
		opacity: 1;
		transform-origin: 100% 0%;
		transform: scaleX(1);
	}
}

@keyframes slideRightOut {
	0% {
		opacity: 1;
		transform-origin: 100% 0%;
		transform: scaleX(1);
	}

	100% {
		opacity: 0;
		transform-origin: 100% 0%;
		transform: scaleX(.8);
	}
}